@import '../../ui/base'
@import './config'

.root 
  position fixed
  top 0
  left 0
  z-index $z-index-second-highest
  width 100%
  height 100%
.scroll
  width 100%
  height 100%
  overflow auto
  text-align center
  line-height 100vh
.overlay 
  position absolute
  top 0
  left 0
  width 100%
  height 100%
  background-color $overlay-color
  opacity 0
  transition-timing-function $animation-curve-default
  transition-duration $animation-duration
  transition-property opacity
  &.active
    opacity $overlay-opacity


.content
  text-align left
  display inline-block
  line-height 1.4
  vertical-align middle
  margin 10px 0
.afterOpen
	.main
		transform translate3d(0, 0, 0)
		opacity 1

.main
	transform translate3d(0, -50px, 0)
	opacity 0
	transition-property opacity, transform
	transition-duration $animation-duration
	transition-timing-function $animation-curve-default
	background-color #fff
	min-width 380px
	display flex
	flex-direction column

.main.alert
	height 160px

.title
	font-size $h2
	margin-bottom 30px

.close
	position absolute
	right 10px
	top 10px
	z-index 10

.body
	display flex
	flex-direction column
	flex 1
	justify-content space-between

.actions
	display flex
	justify-content flex-end
	button
		&+button
			margin-left 10px

.has-guide.scroll
  padding-bottom 108px


.dialog-close-icon 
  position absolute
  right 0
  top 0
  text-align center
  display block
  height 100%
  line-height 46px
  width 46px
  font-size 16px
  background-color #29e
  color #fff
  &:hover
    cursor pointer